<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>默认配置</title>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
</head>
<body>
<button>GET请求</button>
<button>Post请求</button>
<button>PUT请求</button>
<button>DELETE请求</button>
<script>
    let btns = document.querySelectorAll('button');
    //默认配置
    axios.defaults.method = 'get';//默认请求类型为get
    axios.defaults.baseURL = 'http://localhost:3000';
    
    //get请求
    btns[0].addEventListener('click', function () {
        axios({
            method: 'get',
            url: 'http://localhost:3000/posts/1',
        }).then((value) => {
            console.log(value);
        })
    });
    //post请求
    btns[1].addEventListener('click', function () {
        axios({
            method: 'post',
            url: 'http://localhost:3000/posts',
            data: {
                title: "你好",
                author: 'andy'
            }
        }).then((value) => {
            console.log(value);
        })
    });
    //put请求
    btns[2].addEventListener('click', function () {
        axios({
            method: 'put',
            url: 'http://localhost:3000/posts/2',
            data: {
                title: 'hello',
                author: 'tom'
            }
        }).then((value) => {
            console.log(value);
        })
    })
    //delete
    btns[3].addEventListener('click', function () {
        axios({
            method: 'delete',
            url: 'http://localhost:3000/posts/2',
        }).then(response => {
            console.log(response)
        })
    })
</script>
</body>
</html>